Coding Schools

How to add CSS in HTML
Types of CSS Files
Flex in CSS
Media Query in CSS
CSS - background attribute
CSS - border
css - border-image
CSS align attributes
CSS color attribute
CSS cursor attribute
CSS display attribute
CSS font attributes
CSS height and max-height
CSS width and max-width
CSS padding attributes
CSS margin attributes
CSS mask attributes
CSS overflow attributes
CSS opacity attribute
CSS text decoration attributes
CSS visibility attribute
CSS word attributes
CSS z-index attribute

CSS mask attributes

The mask properties in CSS are used to create masking effects on elements. Masks can hide parts of an element or modify its visibility. Here are the key mask attributes you can use:

1. `mask-image`

Specifies the image to be used as a mask:

css

.element {
    mask-image: url('mask-image.png');
}

2. `mask-mode`

Specifies whether the mask image is treated as a luminance or alpha mask:

css

.element {
    mask-mode: alpha;  /* Default: alpha mask */
}

3. `mask-repeat`

Specifies how the mask image is repeated:

css

.element {
    mask-repeat: no-repeat;   /* No repetition */
    mask-repeat: repeat;      /* Repeats both horizontally and vertically */
    mask-repeat: repeat-x;    /* Repeats horizontally */
    mask-repeat: repeat-y;    /* Repeats vertically */
}

4. `mask-position`

Specifies the position of the mask image:

css

.element {
    mask-position: center;  /* Positions the mask image at the center */
}

5. `mask-size`

Specifies the size of the mask image:

css

.element {
    mask-size: cover;      /* Scales the mask image to cover the element */
    mask-size: contain;    /* Scales the mask image to fit within the element */
}

6. `mask-composite`

Specifies how multiple mask images are composited together:

css

.element {
    mask-composite: add;  /* Adds multiple mask layers together */
}

7. `mask-origin`

Specifies the origin (reference point) for the mask positioning area:

css

.element {
    mask-origin: border-box; /* Uses the border box as the reference point */
}

8. `mask-clip`

Specifies the area within which the mask is applied:

css

.element {
    mask-clip: border-box; /* Masks the border area */
}

9. `mask-border`

Defines the border mask (similar to border-image):

css

.element {
    mask-border-source: url('mask-border.png'); /* Mask border image */
    mask-border-slice: 30;                      /* Slices the image */
    mask-border-width: 15px;                    /* Width of the mask border */
    mask-border-repeat: stretch;                /* How the mask border is repeated */
}

Example

Here is an example that uses multiple mask properties:

css

.element {
    mask-image: url('mask-image.png');
    mask-mode: alpha;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-origin: border-box;
    mask-clip: border-box;
}

Using these mask properties, you can create various masking effects to enhance your web designs. Let me know if you need more details or specific examples!

Coding Schools

CSS mask attributes

1. mask-image

2. mask-mode

3. mask-repeat

4. mask-position

5. mask-size

6. mask-composite

7. mask-origin

8. mask-clip

9. mask-border